<template>
	<view>

		<view class="bg4">
			<view class="logo flex_c">
				<image src="../../static/image/logo1.png" mode=""></image>
				<text>福合宇宙</text>
			</view>
			<image :src="download.img" mode="aspectFill"></image>
		</view>
		<view class="downLoad flex_ZC" @click="downLoads">
			<image class="highlights" src="../../static/image/mask.png" mode=""></image>
			<text>立即下载</text>
		</view>
		<!-- #ifdef H5 -->
		<view class="opens flex_c" @click="tapOpen">
			<text class=" f24">已安装？点击这里打开福合宇宙</text>
		</view>
		<!-- #endif -->
		<view class="version flex_ZC">
			<text>版本：{{download.version}}更新时间：{{download.app_update_time}}</text>
			<view class="mart10">
				<text>查看</text>
				<text class="underline" @click.stop="showAgreements(1)">用户协议</text>
				<text>与</text>
				<text class="underline" @click.stop="showAgreements(2)">隐私政策</text>
				<text>信息</text>
			</view>
		</view>


		<!-- 协议弹窗 -->
		<u-popup mode="center" :show="isShowAgreement" @close="isShowAgreement = false" bgColor="transparent">
			<view class="modal-content">
				<!-- <view class="title">《{{tit}}》</view> -->
				<scroll-view scroll-y>
					<view class="agreement-txt">
						<view class="rich-text-wrp">
							<rich-text style="opacity: 0.7;" :nodes="yhxy"></rich-text>
						</view>
					</view>
				</scroll-view>
				<view class="close_btn" @click="hideAgreement">
					<text>关闭</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		download
	} from "../../api/index.js"
	import {
		registerAgreement
	} from "../../api/login.js"
	export default {
		data() {
			return {
				tit: '',
				yhxy: '', //协议
				download: {},
				isShowAgreement: false,
			}
		},
		onLoad() {
			this.isDownload()
		},
		methods: {
			// 版本信息
			isDownload() {
				download().then(res => {
					console.log(res)
					this.download = res.data
				})
			},

			//弹出层
			showAgreements(id) {
				console.log(id);
				this.isShowAgreement = true;
				registerAgreement().then(res => {
					console.log(res)
					if (id == 1) {
						this.yhxy = res.data.yhxy
						this.tit = '用户协议'
					} else {
						this.yhxy = res.data.privacy_agreement
						this.tit = '隐私协议'
					}
				})
			},
			// 关闭弹窗
			hideAgreement() {
				this.isShowAgreement = false;
			},
			// 下载apk
			downLoads() {
				window.location.href = this.download.download
			},
			// 打开app
			tapOpen() {
				let u = navigator.userAgent;
				var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
				if (isWeixin) {
					uni.$u.toast('请在浏览器中打开');
					return false;
				}
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'android') {
					this.android()
				}
				if (platform === 'ios') {
					this.ios()
				}
			},
			android() {
				window.location.href = "fhyz://"; //找android工程师要 UrlSchemes
				// 启动间隔20ms运行的定时器，并检测累计消耗时间是否超过2000ms,超时则结束
				// uni.showLoading({
				// 	title: '加载中...'
				// });
				// const currentTime = new Date().getTime();
				// let _count = 0,
				// 	timer;
				// timer = setInterval(() => {
				// 	_count++;
				// 	const endTime = new Date().getTime() - currentTime;
				// 	if (_count >= 200 || endTime > 5000) {
				// 		uni.hideLoading()
				// 		clearInterval(timer);
				// 		let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden;
				// 		if (typeof hidden == "undefined" || hidden == false) {
				// 			//App下载地址
				// 			window.location.href = this.download.download
				// 		}
				// 	}
				// }, 20)
			},
			ios() {
				window.location.href = "fhyz://"; //找ios工程师要 UrlSchemes
				// uni.showLoading({
				// 	title: '加载中...'
				// });
				//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
				// const currentTime = +(new Date());
				// let _count = 0,
				// 	timer;
				// timer = setInterval(function() {
				// 	_count++;
				// 	const endTime = +(new Date()) - currentTime;
				// 	if (_count >= 100 || endTime > 3000) {
				// 		uni.hideLoading()
				// 		clearInterval(timer);
				// 		let hidden = window.document.hidden || window.document.mozHidden || window.document
				// 			.msHidden || window.document.webkitHidden;
				// 		if (typeof hidden == "undefined" || hidden == false) {
				// 			//App store下载地址
				// 			window.location.href = "https://www.baidu.com";
				// 		}
				// 	}
				// }, 20);
			},
		},
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.logo {
		top: 100rpx;
		width: 100%;
		margin: 0 auto;
		transform: translateY(200rpx);
	}

	.logo>image {
		width: 104rpx;
		height: 74rpx;
		margin-right: 10rpx;
	}

	.logo>text {
		font-size: 50rpx;
		font-family: 'iconfont2';
		color: #ffffff;
	}

	.bg4 {
		position: relative;
		width: 100%;
		height: 1078rpx;
		background: url(../../static/image/bg4.png);
		background-size: 100% 100%;
	}

	.bg4>image {
		position: absolute;
		top: 42%;
		left: 51%;
		transform: translateX(-50%);
		width: 240rpx;
		height: 240rpx;
	}

	.downLoad {
		position: relative;
		display: flex;
		width: 84%;
		margin: 84rpx auto 0;
	}

	.downLoad>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.already {
		color: #ffffff;
		font-size: 24rpx;
		margin-top: 42rpx;
	}

	.opens {
		margin-top: 30rpx;
		color: #ffffff80;
	}

	.version {
		margin-top: 100rpx;
		color: #A6A5AF;
		font-size: 24rpx;
	}

	.mart10 {
		margin-top: 10rpx;
	}

	.modal-content {
		width: 600rpx;
		height: 720rpx;
		background-color: #211E38;
		border-radius: 20rpx;
		z-index: 2;
		margin: 0 auto;
	}

	.modal-content scroll-view {
		max-height: 560rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.modal-content .title {
		font-weight: bold;
		text-align: center;
		line-height: 2;
		font-size: 32rpx;
		padding: 20rpx 20rpx 0;
		color: #ffffff;
	}


	.agreement-txt {
		width: 92%;
		margin: 0 auto;
		padding: 20rpx 10rpx;
		min-height: 450rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #ffffff;
	}

	.close_btn {
		width: 92%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		margin: 30rpx auto 0;
		background: linear-gradient(274deg, rgba(0, 20, 255) 0%, rgba(128, 32, 239) 50%, rgba(255, 44, 223) 100%);
		color: #ffffff;
		border-radius: 40rpx;
		text-align: center;
	}
</style>